<template>
  <div class="guess bi-line">
              <h5>知识推荐</h5>
              <el-row v-for="item in loList" :key="item.id" class="loitem" @click.native="knowledge(item.id)">
                <el-col :span="7">
                  <div class="img"><img :src="item.img" /></div>
                </el-col>
                <el-col :span="17" class="right">
                  <h3>{{ item.title }}</h3>
                  <div>
                    <span v-for="item2 in item.label" :key="item2">{{
                      item2
                    }}</span>
                    <!-- <span>{{item.partPname}}</span>
                    <span>{{item.partName}}</span>
                    <span>{{item.departmentPname}}</span>
                    <span>{{item.departmentName}}</span> -->
                  </div>
                  <h5>{{ item.viewNum }}人已读</h5>
                </el-col>
              </el-row>
            </div>
</template>

<script>
export default {
data(){
  return{
    loList: [
        // {
        //   id: 1,
        //   img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
        //   title: "谨防心脑血管疾病四大危害",
        //   label: ["内科", "心血管内科", "胸部"],
        //   num: 123,
        // },
        // {
        //   id: 2,
        //   img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
        //   title: "谨防心脑血管疾病四大危害病四大危疾病四",
        //   label: ["内科", "心血管内科", "胸部"],
        //   num: 123,
        // },
        // {
        //   id: 3,
        //   img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
        //   title: "谨防心脑血管疾病四大危害",
        //   label: ["内科", "心血管内科", "胸部"],
        //   num: 123,
        // },
      ],
  }
},
props:['partPid','departmentPid'],
mounted(){
    this.$axios({
          method:'get',
          url:'/knowledge/recommend',
          params:{
            partPid:this.partPid,
            departmentPid:this.departmentPid
          }
        })
        .then((res)=>{
          this.loList=res.data
        })
        .catch((err) => {
          console.log(err);
        })
  },
methods:{
  knowledge(knowledgeId){
    console.log("知识id："+knowledgeId)
    this.$router.push({path:'/main/knowledgedetail',name:'knowledgedetail',query:{id:knowledgeId}})
  }
}
}
</script>


<style lang="less" scoped>
.guess {
  border-radius: 10px;
  box-sizing: border-box;
  padding: 15px 10px;
  margin-bottom: 30px;
  h5 {
    text-align: left;
    color: #9ba5bb;
  }
   .loitem {
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
    span {
      background-color: #9ba5bb;
      color: white;
      font-size: 8px;
      border-radius: 5px;
      padding: 2px;
      margin: 5px 2px;
      text-align: left;
    }
    .img {
      height: 90px;
      width: 100%;
      border-radius: 5px;
      overflow: hidden;
      line-height: 90px;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .right {
      padding-left: 10px;
      h3 {
        font-size: 18px;
        font-weight: 400;
      }
      h5 {
        font-size: 12px;
        font-weight: 400;
        position: absolute;
        bottom: 2px;
      }
    }
   }}
   .ri-line {
  border: 2px dashed #ff4402;
}
.bi-line {
  border: 2px dashed #3eca69;
}
</style>